<template>
  <div>
    <el-form ref="form" label-width="80px" :model="spu">
      <el-form-item label="Spu名称">
        <el-input placeholder="Spu名称" v-model.trim="spu.spuName"></el-input>
      </el-form-item>
      <!-- 下拉框 -->
      <el-form-item label="品牌">
        <el-select placeholder="请选择品牌" v-model="spu.tmId">
          <el-option
            :label="tm.tmName"
            :value="tm.id"
            v-for="(tm, index) in tradeMarkList"
            :key="tm.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Spu描述">
        <el-input
          type="textarea"
          rows="4"
          placeholder="Spu描述"
          v-model="spu.description"
        ></el-input>
      </el-form-item>
      <el-form-item label="Spu图片">
        <!-- 上传图片：action图片上传地址 list-type:文件列表的类型 on-preview：图片预览触发 on-remove：删除图片的时候会触发
              file-list：照片墙需要展示的数据【数组：数组里面的元素务必要有name、url属性】
              on-preview:图片预览功能     on-remove:图片删除功能
        -->
        <el-upload action="/dev-api/admin/product/fileUpload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleUploadSuccess" :file-list="spuImageList">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog
        ><!--  -->
      </el-form-item>
      <el-form-item label="销售属性">
        <el-select :placeholder="`还有${unSelectedSaleAttr.length}种未选择`" v-model="unSelectedAttrInfo">
          <el-option :label="unSelected.name" :value="`${unSelected.id}+${unSelected.name}`" v-for="(unSelected,index) in unSelectedSaleAttr" :key="unSelected.id"></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-plus" style="margin: 0 10px" :disabled="!unSelectedAttrInfo" @click="addSaleAttr">添加销售属性</el-button>
        <!-- 展示的是当前Spu属于自己的销售属性 -->
        <el-table  style="width: 100%; margin: 10px 0" border :data="spu.spuSaleAttrList" >
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="saleAttrName" label="属性名" width="160">
          </el-table-column>
          <el-table-column prop="prop" label="属性值名称列表" width="width">
            <template slot-scope="{ row, $index }">
              <el-tag :key="tag.id" v-for="(tag,index) in row.spuSaleAttrValueList" closable :disable-transitions="false"  @close="handleClose(row,index)">
                {{ tag.saleAttrValueName }}
              </el-tag>
              <!-- 底下的结构类似 span 和 input 切换 -->
              <!-- @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" -->
              <el-input class="input-new-tag" v-if="row.inputVisible" v-model="row.inputValue" ref="saveTagInput" size="small"  @blur="handleInputConfirm(row)" > </el-input>
              <!--  @click="showInput" -->
              <el-button v-else class="button-new-tag" size="small" @click="addSaleAttrValue(row)">添加</el-button >
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="160">
            <template slot-scope="{row,$index}">
              <el-popconfirm  :title="`确定删除${row.saleAttrName}属性吗？`"  @onConfirm="deleteSaleAttr(row,$index)">
                     <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addOrUpdateSpu">保存</el-button>
        <el-button @click="$emit('changeScene',{scene:0,flag:''})">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SpuForm",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      //spu初始化是一个对象,添加的时候，不知道收集到哪
      spu: {
        category3Id: 0,
        //品牌的Id
        tmId: '',
        //描述
        description: "",
        //Spu名称
        spuName: "",
        //收集Spu图片的信息
        spuImageList: [
        /*   {
            id: 0,
            imgName: "string",
            imgUrl: "string",
            spuId: 0,
          }, */
        ],
        //平台属性与属性值的数据
        spuSaleAttrList: [
          /*  {
            baseSaleAttrId: 0,
            id: 0,
            saleAttrName: "string",
            spuId: 0,
            spuSaleAttrValueList: [
              {
                baseSaleAttrId: 0,
                id: 0,
                isChecked: "string",
                saleAttrName: "string",
                saleAttrValueName: "string",
                spuId: 0,
              },
            ],
          }, */
        ],
      }, //存储Spu信息属性
      tradeMarkList: [], //存储品牌的信息
      spuImageList: [], //存储Spu图片的数据
      saleAttrList: [], //销售属性的数据
      unSelectedAttrInfo:'', //收集未选择的销售属性信息  比如 "2+版本"  Id+name
    };
  },
  methods: {
    //照片墙删除某一个图片的时候触发
    handleRemove(file, fileList) {
      //file:代表删除的那张图片
      //fileList：照片墙删除某一张图片后剩余其它的图片
      //对于照片墙是一定需要 【name、url字段的】   服务器则不需要 提交给服务器的时候，需要处理
      //删除之后更新照片墙的图片数据
      this.spuImageList=fileList
    },
    //照片墙预览的回调
    handlePictureCardPreview(file) {
      //将图片的地址赋值给这个属性
      this.dialogImageUrl = file.url;
      //显示对话框  
      this.dialogVisible = true;
    },
    //上传成功的回调
    handleUploadSuccess(response, file, fileList){
      //response:上传成功的结果，带有上传的图片数据
      //收集图片的信息
      this.spuImageList=fileList
    },
    //初始化SpuForm数据
    async initSpuData(spu) {
      //获取spu信息的数据
      let spuResult = await this.$API.spu.reqSpu(spu.id);
      if (spuResult.code == 200) {
        this.spu = spuResult.data;
      }
      //获取品牌的信息
      let tradeMarkResult = await this.$API.spu.reqTradeMarkList();
      if (tradeMarkResult.code == 200) {
        this.tradeMarkList = tradeMarkResult.data;
      }
      //获取Spu图片的数据
      let spuImageResult = await this.$API.spu.reqSpuImageList(spu.id);
      if (spuImageResult.code == 200) {
        let listArr = spuImageResult.data;
        //由于照片墙显示图片的数据需要数组，数组里面的元素需要有name与url字段
        //需要把服务器返回的数据进行修改
        listArr.forEach((item) => {
          item.name = item.imgName;
          item.url = item.imgUrl;
        });
        //把整理好的数据赋值
        this.spuImageList = listArr;
      }
      //获取平台属性的数据
      let saleAttrResult = await this.$API.spu.reqBaseSaleAttrList();
      if (saleAttrResult.code == 200) {
        this.saleAttrList = saleAttrResult.data;
      }
    },
    //父组件Spu点击添加Spu按钮的回调 发两个请求
    async addSpuData(category3Id){
        //添加Spu的时候收集三级分类的id
        this.spu.category3Id=category3Id
       //获取品牌的信息
      let tradeMarkResult = await this.$API.spu.reqTradeMarkList();
      if (tradeMarkResult.code == 200) {
        this.tradeMarkList = tradeMarkResult.data;
      }
        //获取平台属性的数据
      let saleAttrResult = await this.$API.spu.reqBaseSaleAttrList();
      if (saleAttrResult.code == 200) {
        this.saleAttrList = saleAttrResult.data;
      }
    },
    //添加新的销售属性值
    addSaleAttr(){
      //已经收集到了需要添加属性的信息
      //把收集到的销售属性数据分割
      const [baseSaleAttrId,saleAttrName] = this.unSelectedAttrInfo.split('+')
      //整理数据
      let  newSaleAttr={baseSaleAttrId,saleAttrName,spuSaleAttrValueList:[]}
      //向Spu对象的spuSaleAttrList数组里面添加新的销售属性
      this.spu.spuSaleAttrList.push(newSaleAttr)
      //添加成功后需要置空数据，以访重复添加
      this.unSelectedAttrInfo=''
    },
    //添加属性值按钮的回调
    addSaleAttrValue(row){
       //点击销售属性值当中的添加按钮时，需要展示input    inputVisible控制
       //挂载在销售属性上的响应式数据inputVisible，控制button与input的切换
      this.$set(row,'inputVisible',true)
      //通过响应式数据inputVaule字段收集新增的销售属性值
      this.$set(row,'inputValue','') 
      //点击添加按钮 给input聚焦
      this.$nextTick(()=>{
        this.$refs.saveTagInput.focus()
      })
    },
    //添加属性值el-input 失去焦点的回调
    handleInputConfirm(row){
      //解构出销售属性当中收集的数据
      const {baseSaleAttrId,inputValue}=row
      //把数据添加到spuSaleAttrValueList中
      //整理新增的属性值
      let newSaleAttrValue={baseSaleAttrId,saleAttrValueName:inputValue}
      //添加数据之前先判断 不能为空 
      if(inputValue.trim()!=''){
       // 不能重复
       let  noRepeat= row.spuSaleAttrValueList.every(item=>{
         return item.saleAttrValueName!=inputValue.trim()
        })
        if(noRepeat){
          //不重复的属性值 添加
           row.spuSaleAttrValueList.push(newSaleAttrValue)
        }else{
          //重复提示
          this.$message.warning('不能添加重复的属性值')
        }
      }
      row.inputVisible=false
    },
    //删除标签的回调
    handleClose(row,index){
      //删除点击的标签
      row.spuSaleAttrValueList.splice(index,1)
    },
    //删除某一属性的回调
    deleteSaleAttr(row,$index){
      this.spu.spuSaleAttrList.splice($index,1);
    },
    //保存 新增或修改Spu的按钮的回调
    async addOrUpdateSpu(){
       //整理参数:需要整理照片墙的数据
       //携带参数：对于图片，需要携带imgName与imgUrl字段
      this.spu.spuImageList = this.spuImageList.map(item=>{
        return {
          imgName:item.name,
          imgUrl:(item.response&&item.response.data)||item.url
        }
       })
       //判定Spu是否有属性名
       if(this.spu.spuName){
          try {
         await this.$API.spu.reqAddOrUpdateSpu(this.spu)
         //成功
         this.$message.success('保存成功')
         //通知父组件 切换scene
         this.$emit('changeScene',{scene:0,flag:this.spu.id?'upload':'add'})
      } catch (error) {
        this.$message.error('保存失败')
      }
       }else{
        this.$message.error('Spu名称不能为空')
       }
     
      
    }
  },
  computed:{
    //计算出还未选择的销售属性
    unSelectedSaleAttr(){
      //过滤出未选择的属性名并返回
     let filteredAttrList = this.saleAttrList.filter(item=>{
       return this.spu.spuSaleAttrList.every(item1 =>{
         return  item.name!=item1.saleAttrName
       })
      })
      return filteredAttrList;
    }
  },
};
</script>

<style  scoped>
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>